<template>
  <!-- 旧apk -->
  <div style="margin: 20px">
    <div style=" background-color: #172958">
      <div style="margin-bottom: 5px;">
        <el-button type="primary" style="background-color: #1890ff">
          导入
        </el-button>
        <el-button type="primary" style="background-color: #1890ff">
          导出
        </el-button>

        <el-input v-model="searchText" placeholder="APK名称" clearable style="width: 200px;" suffix-icon="el-icon-search"
          class="align mainInput" @keyup.enter.native="handleSearch" />
        <el-select v-model="selected" placeholder="名称" style="width: 150px;" class="align mainInput">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <div class="mainTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="user" label="用户" width="120" sortable />
          <el-table-column prop="name" label="应用名称" width="120" sortable />
          <el-table-column prop="version" label="当前版本" width="100" show-overflow-tooltip sortable />
          <el-table-column prop="address" label="上传路径" show-overflow-tooltip sortable>
            <template slot-scope="scope">
              <div style="color: #1890ff;">
                {{ scope.row.address }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" show-overflow-tooltip sortable />
          <el-table-column prop="riskInfo" label="风险信息" show-overflow-tooltip />
          <el-table-column prop="downloadTime" label="下载时间" show-overflow-tooltip />
          <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip />
          <el-table-column prop="operation" label="操作" show-overflow-tooltip>
            <el-button type="text" @click="dialogVisible = true">
              详情
            </el-button>

            <el-button type="text" @click="dialogVisible1 = true">
              删除
            </el-button>

            <!-- 弹窗 -->
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
      <span>确认删除该终端app记录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情弹窗 -->
    <detailsDialog :dialog-show="dialogVisible" @hideDetailsDialog="hideDialog" />
  </div>
</template>

<script>
import detailsDialog from "@/views/scratch file/details2.vue";

export default {
  components: { detailsDialog },
  data() {
    return {
      dialogVisible: false, // 控制弹窗的显示与隐藏
      dialogVisible1: false, // 控制弹窗的显示与隐藏
      tableData: [
        {
          user: "王小虎",
          name: "抖音",
          version: "1.0",
          address: "C:\desktop",
          status: "已更新",
          riskInfo: "位置信息",
          downloadTime: "2022-01-01 10:00:00",
          updateTime: "2022-01-02 14:00:00",
        },
        {
          user: "白小凡",
          date: "2016-05-02",
          name: "网易云音乐",
          version: "1.7",
          address: "C:\wenjian",
          status: "未更新",
          riskInfo: "短信信息",
          downloadTime: "2022-01-01 11:00:00",
          updateTime: "2022-01-02 15:00:00",
        },
        {
          user: "徐林飞",
          name: "Facebook",
          version: "2.5.2",
          address: "C:\anzhaung",
          status: "已更新",
          riskInfo: "通讯录信息",
          downloadTime: "2022-01-01 12:00:00",
          updateTime: "2022-01-02 16:00:00",
        },
        {
          user: "张明轩",
          name: "QQ",
          version: "1.6.5",
          address: "C:\anzhuang",
          status: "已更新",
          riskInfo: "热点信息",
          downloadTime: "2022-01-01 12:00:00",
          updateTime: "2022-01-02 16:00:00",
        },
      ],

      selected: "",
      searchText: "",
      options: [
        { value: "option1", label: "选项1" },
        { value: "option2", label: "选项2" },
        { value: "option3", label: "选项3" },
      ],
    };
  },
  methods: {
    hideDialog(val) {
      console.log(val);
      this.dialogVisible = val;
    },
    handleSearch() {
      console.log("搜索内容：", this.searchText);
      // 在这里添加搜索逻辑
    },

    handleImport() {
      // 导入逻辑
    },
    handleExport() {
      // 导出逻辑
    },
    handleDelete() {
      // 删除逻辑
    },
  },
};
</script>

<style scoped>
.align {
  float: right;
}
</style>